<template>
  <div class="table-box table-content">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getRulePackage"
      :init-param="initParam"
      :request-auto="true"
      :data-callback="dataCallback"
      :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
      row-key="rulePackageNo"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="add">新增</el-button>
        <el-button type="primary" :icon="EditPen" plain @click="edit(scope)">编辑</el-button>
        <el-button type="primary" :icon="Delete" plain @click="del(scope)">删除</el-button>
        <!-- <el-button type="primary" :icon="Search" plain @click="search(scope)">搜索</el-button> -->
      </template>
    </ProTable>

    <el-drawer v-model="drawer" :title="`${title}规则包`" :direction="direction" :before-close="handleClose">
      <el-form>
        <el-form-item label="规则包名称" v-if="title === '新增'">
          <el-input v-model="packageName" placeholder="规则包名称" />
        </el-form-item>
        <el-form-item label="温馨提示" v-if="title === '新增'">
          <div>
            规则包名称只能输入字母<br />
            (例如:label.rulePackage.requestRule)
          </div>
        </el-form-item>
        <el-form-item label="类型" v-if="title === '新增'">
          <el-select v-model="type" placeholder="请选择类型">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="别名">
          <el-input v-model="alias" placeholder="请输入别名" />
        </el-form-item>
        <el-form-item label="操作">
          <el-button type="primary" :icon="Upload" @click="UploadPackage">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup lang="ts" name="rulePackManagement">
import { ref, reactive } from "vue";
import { CirclePlus, Delete, EditPen, Search, Download, Upload, View, Refresh, InfoFilled } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import {
  getRulePackage,
  checkRulePackage_add,
  addRulePackage,
  editRulePackage,
  deleteRulePackage
} from "@/api/modules/dictionary";
import { ElMessage, ElMessageBox } from "element-plus";
const proTable = ref<ProTableInstance>();
const dataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
const initParam = ref("");
const columns = reactive<ColumnProps<any>[]>([
  {
    type: "selection"
  },
  {
    prop: "packageName",
    label: "规则包名称",
    sortable: true,
    search: {
      el: "input",
      tooltip: "输入规则包名称",
      label: "规则包名称",
      key: "rulePackageDto.packageName"
    }
  },
  {
    prop: "flagName",
    label: "类型",
    sortable: true,
    render(h) {
      switch (h.row.flagName) {
        case "requestProce":
          return "请求流程流转中触发";
        case "saveChange":
          return "[System] 变更新增时触发";
        case "changeProce":
          return "变更流程流转中触发";
        case "saveRequest":
          return "[System] 请求新增时触发";
        default:
          return "";
      }
    },
    enum: [
      {
        genderLabel: "请求新增时触发",
        genderValue: "requestProce"
      },
      {
        genderLabel: "变更新增时触发",
        genderValue: "saveChange"
      },
      {
        genderLabel: "请求流程流转中触发",
        genderValue: "requestProce"
      },
      {
        genderLabel: "变更流程流转中触发",
        genderValue: "changeProce"
      }
    ],
    fieldNames: { label: "genderLabel", value: "genderValue" },
    search: {
      el: "select",
      tooltip: "输入类型名称",
      label: "类型",
      key: "rulePackageDto.flagName",
      props: { filterable: true }
    }
  },
  {
    prop: "rulePackageRemarks",
    label: "别名",
    sortable: true,
    search: {
      el: "input",
      tooltip: "输入别名",
      label: "规则包备注",
      key: "rulePackageDto.rulePackageRemarks"
    }
  }
]);
const title = ref("");
const drawer = ref(false);
const direction = ref<"ltr" | "rtl" | "ttb" | "btt">("rtl");
const typeOptions = [
  {
    value: "request",
    label: "请求流程流转中触发"
  },
  {
    value: "change",
    label: "变更流程流转中触发"
  }
];
const packageName = ref("");
const type = ref("");
const alias = ref("");
const handleClose = () => {
  //
  drawer.value = false;
};
//新增
const add = () => {
  drawer.value = true;
  title.value = "新增";
};
const rulePackageNo = ref("");
const edit = e => {
  if (e.selectedList.length > 1 || e.selectedList.length === 0) {
    ElMessage.error("请选择一条数据");
    return;
  } else {
    drawer.value = true;
    title.value = "编辑";
    rulePackageNo.value = e.selectedList[0].rulePackageNo;
    alias.value = e.selectedList[0].rulePackageRemarks;
    console.log(e);
  }
};
const del = e => {
  if (e.selectedList.length === 0) {
    ElMessage.error("请选择至少一条数据");
    return;
  } else {
    ElMessageBox.confirm("确实要删除选择的规则包及包下的请求流程规则吗？", "删除确认", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      center: true
    })
      .then(async () => {
        let params = "";
        e.selectedList.forEach(item => {
          params += "ids=" + item.rulePackageNo + "&";
        });
        try {
          const data = await deleteRulePackage(params);
          if (data) {
            ElMessage.success("删除成功");
            proTable.value?.getTableList();
          }
        } catch {
          ElMessage.error("此数据存在相关联的数据，不能删除");
        }
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除"
        });
      });
  }
};
const UploadPackage = async () => {
  if (title.value === "新增") {
    const params = {
      "rulePackageDto.packageName": packageName.value,
      "rulePackageDto.module": type.value,
      "rulePackageDto.rulePackageRemarks": alias.value
    };
    const checkParams = {
      addpackageName: packageName.value
    };
    const res = await checkRulePackage_add(checkParams);
    if ((res as any) === true) {
      const data = await addRulePackage(params);
      console.log(data);
      if (data) {
        ElMessage.success("新增成功");
        drawer.value = false;
        packageName.value = "";
        type.value = "";
        alias.value = "";
        proTable.value?.getTableList();
      } else {
        ElMessage.error("新增失败");
        drawer.value = false;
        packageName.value = "";
        type.value = "";
        alias.value = "";
      }
    } else {
      ElMessage.error("规则包名称已存在");
    }
  } else if (title.value === "编辑") {
    const params = {
      "rulePackageDto.rulePackageNo": rulePackageNo.value,
      "rulePackageDto.rulePackageRemarks": alias.value
    };
    const data = await editRulePackage(params);
    if (data) {
      ElMessage.success("编辑成功");
      drawer.value = false;
      packageName.value = "";
      type.value = "";
      alias.value = "";
      proTable.value?.getTableList();
    } else {
      ElMessage.error("编辑失败");
      drawer.value = false;
      packageName.value = "";
      type.value = "";
      alias.value = "";
    }
  }
};
</script>
